<template>
	<view class="page">
		<view class="content">
			<view class="pannel">
				<view class="list" @click="goToUrl('/pages/pay/charge-list')">
					<u-icon name="list" color="#fff"></u-icon>
				</view>
				<view class="top">
					<u--text text="2000.00" color="white" size=30 lineHeight="1em"></u--text>
					<u--text text="资产总额（元）" color="white" margin="0 0 0 20rpx" size=12></u--text>
				</view>
			</view>
			<view class="middle">
				<view>
					<u--input placeholder="请输入充值金额" border="bottom" type="digit" fontSize="32rpx" v-model="value"
						@change="change"></u--input>
				</view>
				<view class="btns">
					<text v-for="(item, index) in chargeList" :key="index" :class="current == index ? 'current' : ''"
						@click="charge(index)">{{ item
						}}元</text>
				</view>
			</view>
			<view class="pay-type">
				<view class="title">支付方式</view>
				<view class="types">
					<view class="type-list">
						<view class="types-item">
							<u--image mode="widthFix" :showLoading="true" src="/static/icons/counter2.png" width="40rpx"
								height="auto"></u--image><text>微信支付</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn">
				<u-button text="充值" shape="circle" @click="pay" size="large" color="#F21E46"></u-button>
			</view>
		</view>
	</view>
</template>
<script >
export default {
	data() {
		return {
			value: "100",
			chargeList: [100, 200, 500, 1000, 1500, 2000],
			current: 0
		}
	},
	methods: {
		charge(index) {
			this.value = this.chargeList[index]
			this.current = index
		},
		// 支付pay
		pay() {
			const price = this.value
			let reg = /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/;
			const res = reg.test(price);
			console.log(res);
			if (!res) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的金额',
					complete() {
						value.value = ''
					}
				})
				return
			} else {

			}

		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 20rpx;

	.middle {
		margin-top: 20rpx;
		padding: 20rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.pannel {
		background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);
		border-radius: 10rpx;
		padding: 30rpx 40rpx;
		position: relative;

		.list {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.top {
			display: flex;

			::v-deep .u-text {
				flex: 0;
			}

			::v-deep .u-text__value {
				white-space: nowrap !important;
				align-self: flex-end;
			}
		}
	}

	.btns {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		text {
			width: 160rpx;
			text-align: center;
			padding: 16rpx;
			border: 1px solid #eee;
			border-radius: 10rpx;
			margin: 10rpx 0;

			&.current {
				border: 1px solid #F21E46;
				background-color: #ffe1e7;
				color: #F21E46;
			}
		}

	}

	.pay-type {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;

		.title {
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.types {
			font-size: 30rpx;
			font-weight: bold;
		}

		.types-item {
			@include flex-center(row, flex-start, center);

			>text {
				margin-left: 10rpx
			}
		}
	}

	// btn
	.btn {
		width: 710rpx;
		margin: 40rpx auto;
	}
}
</style>
